<template>
  <div class="home">
    <div class="flex margin-btm-20">
      <div class="statistics-item">
        <div>机构数量</div>
        <div class="font-size-32">{{nowData.jgTotal}}</div>
        <div class="padding-top-20">
          <span class="margin-right-20">日新增机构</span>
          <span>{{nowData.dayAddjg}}</span>
        </div>
      </div>
      <!-- <div class="statistics-item">
        <div>访问量</div>
        <div class="font-size-32">121212</div>
        <div class="padding-top-20">
          <span class="margin-right-20">日访问量</span>
          <span>1212000</span>
        </div>
      </div> -->
      <div class="statistics-item">
        <div>在线设备</div>
        <div class="font-size-32">{{nowData.zxsb}}</div>
        <div class="padding-top-20">
          <span class="margin-right-20">在线率</span>
          <span>{{nowData.zxl}}%</span>
        </div>
      </div>
    </div>
    <el-tabs v-model="activeName"
             @tab-click="handleClick">
      <el-tab-pane label="告警数量"
                   name="first">
        <div>告警趋势</div>
        <div class="echart"
             id="mychart"></div>
      </el-tab-pane>
      <!-- <el-tab-pane label="在线设备"
                   name="second">在线设备</el-tab-pane> -->
    </el-tabs>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getData } from "@/api/system/index";
export default {
  name: "Index",
  data() {
    return {
      activeName: 'first',
      xData: ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"], //横坐标
      yData: [23, 24, 18, 25, 27, 28, 25, 23, 24, 18, 25, 21], //数据
      nowData: {},
      gjList: []
    };
  },
  mounted() {

    this.getData()
  },
  methods: {
    getData() {
      getData().then((res) => {
        this.nowData = res.data
        this.gjList = res.data.gjList

        this.initEcharts();
      })
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        xAxis: {
          data: this.gjList.map(item => item.month)
        },
        yAxis: {},
        series: [
          {
            type: "bar", //形状为柱状图
            data: this.gjList.map(item => item.gjCount),
            itemStyle: {//上方显示数值
              normal: {
                label: {
                  show: true,//开启显示
                  position: 'top',//在上方显示
                  textStyle: {//数值样式
                    // color: 'white'
                  }
                }
              },
            },
          }
        ],
      };
      const myChart = echarts.init(document.getElementById("mychart"));
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    }

  },
};
</script>

<style scoped lang="scss">
.home {
  padding: 20px;
}
.statistics-item {
  width: 320px;
  padding: 20px;
  border: 1px solid #dddddd;
  border-radius: 4px;
  margin-right: 10px;

  .font-size-32 {
    margin: 20px 0;
  }

  .padding-top-20 {
    border-top: 1px solid #dddddd;
  }
}

.echart {
  width: 1000px;
  height: 400px;
}
</style>

